IE兼容性

<body>
  <div>
    <div id="div1">hello1</div> //方式1
    <div id="div2">hello2</div> //方式2
    <div id="div3" onclick="test()">hello3</div> //方式3
  </div>
</body>
<script type="text/javascript">
  document.getElementById('div1').addEventListener('click', function(evt) {
    console.log(this); //指向<div id="div1">hello1</div>节点对象
    console.log(evt); //输出事件对象
    console.log(event); //输出事件对象
    console.log(arguments[0]); //输出事件对象
  }, false);
  document.getElementById('div2').onclick = function(evt) {
    console.log(this); //指向<div id="div2">hello2</div>节点对象
    console.log(evt); //输出事件对象
    console.log(event); //输出事件对象
    console.log(arguments[0]); //输出事件对象
  }
  function test(evt) {
    console.log(this); //指向全局对象window
    console.log(evt); //undefined
    console.log(event); //输出事件对象
    console.log(arguments[0]); //undefined
  }
</script>

如果是方式1,2,function定义的时候也可以没有evt形参,但是被调用的时候一定会传递一个事件对象,如果有形参evt,则用evt接收,如果没有,可以在函数内直接通过event或arguments[0]访问.
如果是方式3,当是test()调用时,则不会传递事件对象,evt和arguments[0]均输出undefined.如果是test(evt)调用,则传递事件对象,evt和arguments[0]均输出事件对象

以下内容都是基于http://harttle.com/2015/08/14...的总结

事件处理函数中,我们通常使用this来获取当前被操作的对象,但对于不同的事件绑定方式,this可能不一定指代的是当前被操作的对象.常见的事件绑定方式基本上是以下这些:
1.attachEvent: IE9以下(不包括IE9).
2.addEventListener: 支持DOM Level2 Event的浏览器中.
3.el.onclick = function() {}
4.<div onclick="handle()"></div>
5.jQuery也提供了很多方法来方便地绑定事件.
addEventListener是现代web应用中绑定事件的终极方法.

attachEvent与addEventListener的区别
1.支持的浏览器不同,attachEvent在IE9以下的版本中受到支持,其他的都支持addEventListener.
2.参数不同,addEventListener第三个参数可以指定是否捕获,而attachEvent不支持捕获.
3.事件名不同.attachEvent的第一个参数事件名前要加on.
4.this不同.详情见下

attachEvent方式的事件绑定
attachEvent的this总是指向Window.例如:

el.attachEvent('onclick', function() {
  alert(this);
});

脚本设置onclick方式的事件绑定
设置DOM对象的onclick属性，this总是指向被设置的DOM元素。例如：

document.getElementById('id1').onclick = function() {
  console.log(this);//<div id="id1">...</div>
}

HTML中设置onclick方式的事件绑定
在HTML中设置onclick属性等于让Window调用该函数,于是this总是指向Window.例如:

<div onclick="clickHandler()"></div>
<script>
functon clickHandler() {
  console.log(this);
}
</script>

addEventListener方式的事件绑定
addEventListener的this总是当前正在处理事件的那个DOM对象,DOM Level2 Event Model中提到,事件处理包括捕获阶段/目标阶段/冒泡阶段
图片来源：http://www.w3.org/TR/DOM-Leve...
事件当前正在流过哪个元素,this便指向哪个元素.比如两级的DOM:

<div id="l1">
  <div id="l2"></div>
</div>
<script type="text/javascript">
var l1 = document.getElementById('l1'),
    l2 = document.getElementById('l2');
l1.addEventListener('click', function(){
  console.log('l1 capture', this);
}, true);
l1.addEventListener('click', function(){
  console.log('l1 bubbling', this);
});
l2.addEventListener('click', function(){
  console.log('l2 target', this);
})
</script>

点击div#l2后控制台输出为：

l1 capture <div id="l1">…</div>
l2 target <div id="l2"></div>
l1 bubbling <div id="l1">…</div>

target与currentTarget
addEventListener的事件处理函数中的this不一定指向事实上被点击的元素,但事件处理函数的参数event对象提供了target和currentTarget属性来区分这当前对象和目标对象.我们可以将它们全部输出看看:

l1.addEventListener('click', function(e) {
  console.log('l1 capture', this, e.currentTarget, e.target);
});
l2.addEventListener('click', function(e) {
  console.log('l2 target', this, e.currentTarget, e.target);
});
l1.addEventListener('click', function(e) {
  console.log('l1 bubbling', this, e.currentTarget, e.target);
});

结果是:

l1 capture  <div id="l1">…</div>  <div id="l1">…</div>  <div id="l2"></div>
l2 target   <div id="l2"></div>   <div id="l2"></div>   <div id="l2"></div>
l1 bubbling <div id="l1">…</div>  <div id="l1">…</div>  <div id="l2"></div>

可见currentTarget总是和this相同,而target指向事实上被点击的目标DOM对象.

关于XMLHttpRequest的兼容性

<script type="text/javascript">
   var i = 0,
       xhr = null,
       ids = [
         'MSXML2.XMLHTTP.3.0',
         'MSXML2.XMLHTTP',
         'Microsoft.XMLHTTP'
       ];
   if(window.XMLHttpRequest) {
     // IE7, Chrome, Firefox, Opera, etc
     xhr = new XMLHttpRequest();
   } else {
     // IE6, IE5
     for(i; i < ids.length; i++) {
       try {
         xhr = new ActiveXObject(ids[i]);
         break;
       } catch(e) {}
     }
   }
</script>

添加响应事件函数的兼容性

<script type="text/javascript">
function callback(evt) {
  evt = evt || window.event;
  var target = evt.target || evt.srcElement;
  console.log(target.nodeName);
}
if(document.addEventListener) {
  document.addEventListener('click', callback, false);
} else if(document.attachEvent) {
  document.attachEvent('onclick', callback);
} else {
  document.onclick = callback;
}
</script>

IE兼容性

小被子

引用和评论

cookie

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号